<template>
    <div class="chat-window">
       <div class="chat-window-caption">
          <div class="chat-window-caption-text">
              聊天窗口
          </div>
       </div>
       <div class="chat-window-content">
          <div class="chat-window-content-menu clearfix">
                <div class="chat-window-content-menu-img fl">
                  <!-- <img src="" /> -->
                </div>
                <div class="chat-window-content-menudialog fl">
                  <p class="chat-window-content-menudialog-text clearfix">
                    <span>游戏大佬</span>
                    <span class="fr">20分钟前</span>
                  </p>
                  <p class="chat-window-content-menudialog-title">
                    <span>很早就关注任天堂这款游戏了！</span>
                  </p>
                </div>
          </div>
          <div class="chat-window-content-menu clearfix">
            <div class="chat-window-content-menu-img fl">
              <!-- <img src="" /> -->
            </div>
            <div class="chat-window-content-menudialog fl">
              <p class="chat-window-content-menudialog-text clearfix">
                <span>游戏大佬</span>
                <span class="fr">20分钟前</span>
              </p>
              <p class="chat-window-content-menudialog-title">
                <span>很早就关注任天堂这款游戏了！很早就关注任天堂这款游戏了</span>
              </p>
            </div>
          </div>
          <div class="chat-window-content-menu clearfix">
            <div class="chat-window-content-menu-img fl">
              <!-- <img src="" /> -->
            </div>
            <div class="chat-window-content-menudialog fl">
              <p class="chat-window-content-menudialog-text clearfix">
                <span>游戏大佬</span>
                <span class="fr">20分钟前</span>
              </p>
              <p class="chat-window-content-menudialog-title">
                <span>很早就关注任天堂这款游戏了！</span>
              </p>
            </div>
          </div>
          <div class="chat-window-content-menu clearfix">
            <div class="chat-window-content-menu-img fl">
              <!-- <img src="" /> -->
            </div>
            <div class="chat-window-content-menudialog fl">
              <p class="chat-window-content-menudialog-text clearfix">
                <span>游戏大佬</span>
                <span class="fr">20分钟前</span>
              </p>
              <p class="chat-window-content-menudialog-title">
                <span>很早就关注任天堂这款游戏了！很早就关注任天堂这款游戏了</span>
              </p>
            </div>
          </div>
       </div>
       <div class="chat-window-footer">
           <div class="chat-window-footer-aside">
              <div class="chat-window-footer-aside-box clearfix">
                <input class="fl chat-window-footer-aside-input" v-model="keyword" placeholder="我来说几句..."></input>
                <div class="chat-window-footer-aside-send fl">发送</div>
              </div>
              <Poptip placement="bottom-start" width="300" style="position: absolute;bottom: 0;right: 10px;z-index:40000;" v-model="visible">
                  <div class="face"><img style="width: 25px;" src="../../../static/img/face.png" alt=""></div>
                  <div class="api" slot="content">
                    <emotion @emotion="handleEmotion"></emotion>
                  </div>
              </Poptip>
           </div>
       </div>
    </div>
</template>
<script>
import Emotion from '@/components/Emotion/emotionIndex'
export default {
    data() {
      return{
        keyword : '',
        visible: false,
      }
    },
    components: {
			Emotion
		},
    methods:{
      handleEmotion(i) {
				console.log('i++',i);
				this.msg += i;
				this.visible = false;
			},
      emotion(res) {
        debugger
        console.log('res',res);
				let word = res.replace(/\#|\;/gi, '')
				const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷',
					'冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰',
					'骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜',
					'菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫',
					'便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳',
					'发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极'
				]
				let index = list.indexOf(word)
				return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
      },
    }
}
</script>
<style scoped>
.chat-window-footer-aside-send{
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: rgb(255, 199, 41);
  color: #fff;
}
.chat-window-footer-aside-input{
  outline: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  padding: 0 15px;
  height: 30px;
  flex-grow: 1;
}
.chat-window-footer{
  padding: 4px 7px 7px 30px;
}
.chat-window-footer-aside-box{
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 90%;
}
.chat-window-footer-aside-smile{
  width: 25px;
  height: 25px;
  background: red;
}
.chat-window-footer-aside-smile>img{
  width: 100%;
  height: 100%;
}
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.chat-window{
  background: #fff;
  height: 100%;
}
.chat-window-content-menudialog{
  margin-left: 10px;
  flex-grow: 1;
  width: 80%;
  background: #f5f5f5;
  padding: 10px;
  position: relative;
}
.chat-window-content-menudialog::after{
  display:block;
  content: "";
  width:0;
  height:0;
  border-width:8px 8px 8px 0;
  border-style:solid;
  border-color:transparent #f5f5f5 transparent transparent;/*透明 黄 透明 透明 */
  position:absolute;
  top:15px;
  left:-6px;
}
.chat-window-caption{
  font-weight: bold;
  padding: 10px 20px;
  font-size: 17px;
  text-align: left;
  padding-left: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.chat-window-caption-text{
  padding-left: 30px;
  position: relative;
}
.chat-window-caption-text::after{
  position: absolute;
  content: "";
  width: 4px;
  height: 25px;
  background: rgb(255, 199, 41);
  left: 17px;
  top: -3px;
}
.chat-window-content-menu-img{
  width: 30px;
  height: 30px;
  background: red;
}
.chat-window-content-menudialog-text{
  font-size: 14px;
  color: #888888;
  text-align: left;
  line-height: 1;
}
.chat-window-content-menudialog-title{
  font-size: 22px;
  color: #000000;
  line-height: 1;
  text-align: left;
}
.chat-window-content{
  padding-top: 10px;
  height: calc(100% - 80px);
  border-bottom: 1px solid #f0f0f0;
  overflow-y: scroll;
  overflow-x: hidden;
}
.chat-window-content-menu{
  padding-left: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-right: 10px;
  margin-bottom: 15px;
  position: relative;
}
.chat-window-footer{
  height: 40px;
}
/*滚动条*/
.chat-window-content::-webkit-scrollbar{
  width:8px;
  height:8px;
}
.chat-window-content::-webkit-scrollbar-thumb{
  border-radius:100px;
  box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
  background:rgba(75,81,97,.7);
}
.chat-window-content::-webkit-scrollbar-track{
  box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
  border-radius:0;
  background:rgba(0,0,0,0.1);
}
</style>